/**
 * 作者：小圣贤君
 * 时间：2017-11-8
 * 功能：点击输入框，弹出月份选择框，可以自由的选择年月
 * */
(function($) {
	var MonthPicker = function(dom, options) {
		this.$dom = dom,
			this.defaults = {
				currentYear: '',
			},
			this.opts = $.extend({}, this.defaults, options)
	}
	/**
	 * 添加渲染页面和数据的方法
	 * */
	MonthPicker.prototype = {
		renderMonthPicker: function() {
			var self = this;
			this.$dom.focus(function(event) {
				self.opts.currentYear = new Date().getFullYear();
				$('body').find('.mp-month-picker-box').empty().remove();
				$('body').append('<div class="mp-month-picker-mask"><div class="mp-month-picker-box" style="left:' + $(this).position().left + 'px;top:' + ($(this).position().top + 40) + 'px;">' +
					'<i></i>' +
					'<div class="mp-year-picker">' +
					'<div class="mp-prev-year"><i></i><i></i></div>' +
					'<span>' + self.opts.currentYear + '</span>' +
					'<div class="mp-next-year"><i></i><i></i></div>' +
					'</div>' +
					'<ul class="mp-month-picker">' +
					'<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>' +
					'</ul>' +
					'</div></div>');
			})
		},
		handleClick: function() {
			var self = this;
			this.$dom.blur(function() {
				var innerSelf = this;
				$('div.mp-prev-year').click(function(event) {
					event.stopPropagation();
					$(this).next().html(--self.opts.currentYear);
				})
				$('div.mp-next-year').click(function(event) {
					event.stopPropagation();
					$(this).prev().html(++self.opts.currentYear);
				})
				$('ul.mp-month-picker li').click(function(event) {
					event.stopPropagation();
					var thisVal = $(this).html();
					if(thisVal<10){
						thisVal = '0'+thisVal;
					}
					var value = self.opts.currentYear + '-' + thisVal;
					$(innerSelf).val(value);
					$(this).parent().parent().parent().empty().remove();
				})
				$('div.mp-month-picker-mask').click(function(){
					$(this).empty().remove();
				})
			})
		},
		constructor: MonthPicker
	};
	$.fn.MonthPicker = function(options) {
		var monthPicker = new MonthPicker(this, options);
		monthPicker.renderMonthPicker();
		monthPicker.handleClick();

		return this.each(function() {});
	}
})(jQuery)